<template>
  <div class="information">
    <div class="wrapper">
      <div class="detail" v-cloak>
        <aside-left :asideList="asideList"></aside-left>
      </div>
      <aside-right></aside-right>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import AsideRight from 'common/aside/asideRight/AsideRight';
import AsideLeft from 'common/aside/asideLeft/AsideLeft';
export default {
  name: 'Detail',
  components: {
    AsideRight,
    AsideLeft
  },
  data () {
    return {
      list: {},
      asideList: [],
      id: ''
    }
  },
  methods: {
    getListInfo () {
      const _this = this;
      this.id = this.$route.query.data;
      const arr = [];
      axios.get('/api/source/home.json').then(function(response){
        if(response.data.ret && response.data.data){
          const res = response.data.data
          var flag = false;
          for(let i in res){
            if(res[i].id == _this.id){
              arr.push(res[i]);
              break;
            }else{
              const chirld = res[i].children;
              for(let j in chirld){
                if(chirld[j].id == _this.id){
                  arr.push(chirld[j]);
                  flag = true;
                }
              }
            }
            if(flag){
              break;
            }
          }
          _this.asideList = arr;
        }
      })
    }
  },
  mounted () {
    this.getListInfo();
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/mixins.styl';
  [v-cloak]
    display: none !important
  .information
    container()
    padding-top: $spaceHeight
    .wrapper
      wrapper()
      display: flex
      flex-direction: row
      flex-wrap: wrap
      .detail
        width: 13.6rem
        box-shadow:0 0 0 0 #fff,0 0 0 #fff,0 0 0 #fff,.02rem 0 .1rem 0 $borderLight
        z-index: 2    
</style>
